<template lang="pug">
  .list-wrap
    heads(:title="title" )
      span(class="goBack" @click="goBack") >
    .cont 
      span(v-for="item in list" :key="item.id" @click="clc(item.id)") {{item.name}}
</template>
<script>
import heads from "@/components/head"
import detail from "@/components/detalis"
export default {
  name:"listWrap",
  data(){
    return {
      list:[],
      title:''
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1)
    },
    clc(a){
      this.$router.push({
        path:"/detali",
        query:{
          id:a
        }
      })
    }
  },
  components:{
    heads,
    detail
  },
  created(){
    let id = this.$route.query.id;
    // console.log(id)
     this.axios.get('/data/pjlist.json').then(res=>{
      let obj = res.data.filter(i=>i.id ==id)[0];
      console.log(obj)
      this.title = obj.name;
      this.list = obj.arr;
    })
  }
}
</script>
<style lang="scss" scoped>
  .list-wrap {
    width: 100%;
    height: 100vh;
    background:#333 url('/detaBg.png') no-repeat;
    background-size: cover;
    z-index: 99;
    .cont {
      display: flex;
      flex-wrap: wrap;
      padding:0 .22rem;
      span {
        display: inline-block;
        width:30% ;
        background: #f1f1f1;
        font-size:.22rem ;
        color:#757575;
        height: .6rem;
        line-height: .6rem;
        margin-top:.12rem;
        text-align: center;
        margin-left: .1rem;
        &:active {
          background:transparent ;
        }
      }
    }
    .goBack {
      float: left;
      margin-left: .3rem;
    }
  }
</style>